<template>
  <!--icon组件循环data中的icon数据-->
    <div>
      <div class="icon">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(page,index) of page"  :key="index">
            <div class="iconBtn"  v-for="item of page" :key="item.id">
              <div class="iconBtn-img">
                <img :src="item.imgUrl">
              </div>
              <p>{{item.desc}}</p>
            </div>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </div>
</template>

<script>
    export default {
        name: "HomeIcon",
        props:{
          iconlist:Array
        },
        data(){
          return {
            swiperOption:{
              pagination:'.swiper-pagination',
              loop:false
            }
          }
        },
      computed:{
          page (){
            const pages = []
            this.iconlist.forEach((item,index) => {
              const page = Math.floor(index/8)
              if (!pages[page]){
                pages[page] = []
              }
              pages[page].push(item)

            })
            return pages
          }
      }
    }
</script>

<style scoped lang="stylus">
  @import "~css/varibles.styl";
  .icon >>> .swiper-container{ width: 100%;height: 0;padding-bottom: 56%;overflow: hidden;}
  .icon{ background: #fff}
  .iconBtn{ width: 25%;height: 0;padding-bottom: 25%;position: relative;float: left}
  .iconBtn-img{ width: 100%;float: left;position: absolute;top: 0;left:0;right: 0;bottom: .44rem;
    box-sizing: border-box;padding:.1rem}
  .iconBtn-img img{ height: 100%;margin: 0;display: block;margin: 0 auto}
  .iconBtn p{ position:  absolute;left: 0;bottom: 0;color: $darkTextColor;text-align: center;
    height: .44rem;line-height: .44rem;text-align: center;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
</style>
